<template>
	<view class="activitys-cards">
		<!-- 活动卡片 -->
		<view class="card-item" v-for="(item,index) in changestatus">
			<!-- 卡片上侧 -->
			<view class="card-up">
				<text class="activitys-name" :data-text='item.name'>
					{{item.name}}
					<image class="boom-under" :src="item.underline" mode=""></image>
				</text>
				<text class="activitys-info">
					{{item.info}}
					<text class="going" v-if="!item.isgo">
						: <text style="color: #FF7803;">已结束</text>
					</text>
				</text>
				<text v-show="item.deadline" class="activitys-mes">距离结束：
					<text class="activitys-dead">
						{{item.deadline}}
					</text>
				</text>
			</view>
			<view class="card-down">
				<view class="going" v-if="item.isgo">
					{{item.status}}
				</view>
				<view class="going pause" v-else>
					{{item.status}}
				</view>
				<view class="poster">
					<image class="card-img" :src="item.thumb" mode=""></image>

					</image>

				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				activitydetails: [{
						name: '爆团',
						info: '日常活动，长期开启',
						isgo: true,
						thumb: this.imagesUrl('whitedoll.png'),
						underline: this.imageUrl('underlinedemo.png'),
						status: '进行中'
					},
					{
						name: '神之一手',
						info: '福利活动，限时开启',
						deadline: '23：59：59',
						isgo: true,
						thumb: this.imagesUrl('reddoll.png'),
						underline: this.imageUrl('underlinedemo.png'),
						status: '进行中'
					},
					{
						name: '新手福利',
						info: '限时活动',

						isgo: false,
						thumb: this.imagesUrl('hot-sodier.png'),
						underline: this.imageUrl('underlinedemo.png'),
						status: '已结束'
					},
					{
						name: '神之一手',
						info: '福利活动，限时开启',
						deadline: '23：59：59',
						isgo: true,
						thumb: this.imagesUrl('reddoll.png'),
						underline: this.imageUrl('underlinedemo.png'),
						status: '进行中'
					},
					{
						name: '新手福利',
						info: '限时活动',
						// deadline: '3天',
						isgo: false,
						thumb: this.imagesUrl('hot-sodier.png'),
						underline: this.imageUrl('underlinedemo.png'),
						status: '已结束'
					},

				],
				couponprice: 108,
				joinnum: 3,
				bannerList: []
			}
		},
		props: ["isgoing"],
		computed: {

			// 活动状态
			changestatus() {

				if (this.isgoing == 0) {

					return this.activitydetails.filter(item => item.isgo == true)
				} else {

					return this.activitydetails.filter(item => item.isgo == false)
				}
			}
		},
		mounted() {
			this.bannerList = new Array(5).fill(this.imagesUrl('pinkdoll.png'))
		},
	}
</script>
<!-- 单独设置已结束活动页面 -->
<style>
	page {
		background-color: #0a0a0a;
	}
</style>
<style lang="scss" scoped>
	.activitys-cards {
		.card-item {
			border-radius: 15rpx;
			margin: 20rpx auto;
			color: white;
			width: 690rpx;
			display: flex;
			flex-direction: column;
			justify-content: left;
			align-items: center;
			position: relative;

			.card-up {
				font-size: 24rpx;
				width: 690rpx;

				margin-top: 24rpx;

				.activitys-name {
					color: #000000;
					font-size: 32rpx;
					font-family: YouSheBiaoTiHei;
					position: relative;
					z-index: 10;
					margin-right: 32rpx;
					// text-shadow: 2rpx 2rpx #FF7803;

					.boom-under {
						width: 105%;
						height: 14rpx;
						position: absolute;
						left: 0;
						bottom: 2rpx;
						z-index: -10;
					}

				}


				.activitys-name::before,
				.activitys-name::after {
					content: attr(data-text);
					position: absolute;
					left: 0;
					z-index: -1;
				}

				.activitys-name::before {
					-webkit-text-stroke: 6rpx #fff;
				}

				.activitys-info {
					font-size: 24rpx;
				}

				.activitys-mes {
					margin-left: 20rpx;

				}

				.activitys-dead {
					color: #FF7803;
					font-weight: 500;

				}


			}

			.card-down {
				margin-top: 28rpx;
				width: 100%;
				position: relative;

				.going {
					width: 96rpx;
					height: 48rpx;
					box-sizing: border-box;
					text-align: center;
					line-height: 48rpx;

					background-color: rgba(0, 0, 0, .2);
					color: #FF7803;
					font-size: 24rpx;
					position: absolute;
					bottom: 24rpx;
					right: 24rpx;
					z-index: 5;
				}

				.pause {
					font-size: 24rpx;
					background: #FFFFFF;
					color: #333333;
				}

				.card-img {
					width: 690rpx;
					height: 276rpx;
				}
			}
		}
	}
</style>